<template>
	<view class="liangbiaopnggu">
		<headertop title="量表评估" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<view class="liangbiaopngguback"></view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>

		<view class="jindubox">
			<view class="jindunum">
				进度：
			</view>
			<view class="jinduline">
				<view class="center" :style="{'width':num+'%'}">

				</view>
			</view>
			<view class="jindunum">
				{{num}}%
			</view>
		</view>

		<scroll-view class="bottomcontent" scroll-with-animation enhanced :scroll-y="true"
			@scroll="handleScroll($event,'手动')" :scroll-top="scrolljuli" :style="{'height':pageheight+'px'}">
			<view class="center">
				<view v-for="(item,index) in liaotianarr" :key="index" :id="`target-element${index}`">
					<view class="userlt" v-if="item.shenfen=='user'">
						<image :src="_static('/images/LOGO2@2x.png')" class="avatar" mode="widthFix">
						</image>
						<view class="bubble-container">
							<view v-if="item['text']">{{item['text']}}</view>
							<up-loading-icon text="生成中" textSize="14" v-if="!item['text']"></up-loading-icon>
							<view class="triangle1"></view>
						</view>
					</view>
					<view class="userltright" v-if="item.shenfen!='user'">
						<view class="bubble-container" @click="cc(item,index)">
							<view class="ansderhua" v-if="item.isAnimating">

							</view>
							<view v-else>{{item['text']}}</view>
							<view class="triangle1"></view>
						</view>
						<image :src="userobj.avatar" class="avatar" mode="">
						</image>
					</view>
					<view :class="bool1?'xiamto animate__fadeInUp':'xiamto'" v-if="liaotianarr.length>2&&!item['bool']">
						<view class="cnter" v-if="(index!=0&&index!=1&&index+1==liaotianarr.length&&bool1)"
							id="xuanxiang">
							<view :class="item1['option']==item['text']?'lineti xzcolor':'lineti'"
								v-for="item1 in list[pingguind]['optionjson']" :key="item1.id"
								@click="xzfun(item1,index,item)">
								{{item1['option']}}
							</view>
						</view>
					</view>

					<view class="xiamto" v-if="item['bool']">
						<view class="cnter" id="xuanxiang">
							<view :class="item1['option']==item['text']?'lineti xzcolor':'lineti'"
								v-for="item1 in list[((index+1)/2)-2]['optionjson']" :key="item1.id"
								@click="xzfun(item1,((index+1)/2)-2,item,index)">
								{{item1['option']}}
							</view>
						</view>
					</view>

					<view class="btnssbox" v-if="!startbool">
						<view class="btn" @click="kscp">
							开始测评
						</view>
					</view>
				</view>
			</view>

			<view class="" style="height:20vh">

			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'
	const statusBarHeight = ref('')
	const userobj = ref({})
	import {
		$api
	} from '../../ulm';
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		findIndex
	} from 'lodash'
	const barHeight = ref('')
	const flag = ref(false)
	const pageheight = ref(0)
	const num = computed(() => {
		var arr = list.value.filter(item => item.answer != undefined)
		if (((arr.length / list.value.length) * 100) == 100) {
			return 100
		} else {
			return parseInt((arr.length / list.value.length) * 100)
		}
	})
	const lastScrollTop = ref(0) // 上次滚动位置
	const scrollDirection = ref('') // 滚动方向
	const scrollTop = ref(0) // 当前滚动位置
	const back1 = ref('')
	const bool1 = ref(true)
	const tianchongqu = ref('')
	const pingguind = ref(0)
	const startbool = ref(false)
	const scrolljuli = ref(0)
	const optId = ref(0)
	const liaotianarr = ref([{
		text: '请根据您最近的个人真实状况，如实完成评估。',
		shenfen: 'user'
	}])
	const list = ref([])
	onLoad((opt) => {
		getuser()
		initpg(opt.id)
		optId.value = opt.id
	})

	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;

		pageheight.value = uni.getSystemInfoSync().windowHeight - barHeight.value - statusBarHeight.value - 80
		const query = uni.createSelectorQuery();
		setTimeout(function() {
			query.select(`#target-element0`).boundingClientRect(rect => {
				if (rect) tianchongqu.value = pageheight.value - rect.height - 20
			}).exec(); // 必须调用 exec() 执行查询
		}, 500);
	})
	onPageScroll((e) => {

		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}

	})

	function cc(item, ind) {
		if (ind == 1) return
		item.bool = !item.bool
	}




	function kscp() {
		var arr = uni.getStorageSync('ids')
		if (!arr) {
			arr = []
		}
		var ind = arr.findIndex(item => item == optId.value)
		if (ind == -1) {
			arr.push(optId.value)
		}
		uni.setStorageSync('ids', arr)

		startbool.value = true
		liaotianarr.value.push({
			text: '开始评测',
			shenfen: 'user1',
			bool: false,
			isAnimating: true,
		})
		liaotianarr.value.push({
			text: list.value[pingguind.value]['title'],
			shenfen: 'user',
			bool: false
		})
		setTimeout(() => {
			liaotianarr.value[liaotianarr.value.length - 2]['isAnimating'] = false
		}, 500)
		const query = uni.createSelectorQuery();
		query.select(`#target-element0`).boundingClientRect(rect => {
			if (rect) scrolljuli.value = rect.height + 35
		}).exec(); // 必须调用 exec() 执行查询
	}

	function xzfun(item, index, item1, index1) {
		if (item1.bool) {
			if (list.value[index]['answer'] != item.option) {
				item1.bool = false
			}
			list.value[index]['answer'] = item.option
			liaotianarr.value[index1]['text'] = item.option
			return
		}
		if (!bool1.value) return
		bool1.value = false
		flag.value = false
		list.value[pingguind.value]['answer'] = item.option

		var arre = []
		var arr = list.value.filter(item => item.answer)
		for (var i in arr) {
			var obj = {
				answer: arr[i]['answer'],
				id: arr[i]['id']
			}
			arre.push(obj)
		}
		var arre1 = uni.getStorageSync('liangbiaoanswer') || []
		var ind = arre1.findIndex(item => item.id == optId.value)
		if (ind == -1) {
			arre1.push({
				id: optId.value,
				arr: arre
			})
		} else {
			arre1[ind]['arr'] = arre
		}
		uni.setStorageSync('liangbiaoanswer', arre1)
		console.log(list.value, 'list.valuelist.valuelist.valuelist.value');
		liaotianarr.value.push({
			text: item.option,
			shenfen: 'user1',
			bool: false,
			isAnimating: true,
		})


		setTimeout(() => {
			liaotianarr.value[liaotianarr.value.length - 2]['isAnimating'] = false
		}, 500)
		if (pingguind.value == list.value.length - 1) {
			tijiao()
			return
		}
		liaotianarr.value.push({
			text: '',
			shenfen: 'user',
			bool: false
		})

		setTimeout(() => {
			pingguind.value++
			liaotianarr.value[liaotianarr.value.length - 1]['text'] = list.value[pingguind.value]['title']
			console.log(list
				.value[
					pingguind.value]['optionjson'].length, 'lengthlengthlengthlength');
			// const query = uni.createSelectorQuery(); 
			// query.select(`#target-element${liaotianarr.value.length - 1}`).boundingClientRect(rect => {
			// 	console.log(44 * list.value[pingguind.value]['optionjson'].length + 54 + rect.height + 28,
			// 		'1231233213');
			// 	console.log(rect.height + (22 * list.value[pingguind.value]['optionjson'].length) + 54,
			// 		index,
			// 		'rect.heightrect.heightrect.height', pageheight.value, rect);
			// 	if (rect) tianchongqu.value = pageheight.value - (rect.height + (44 * list
			// 		.value[ 
			// 			pingguind.value]['optionjson'].length) + 54 + 28 + 10)
			// 	console.log(tianchongqu.value,
			// 		'tianchongqu.valuetianchongqu.valuetianchongqu.valuetianchongqu.value');
			// }).exec(); // 必须调用 exec() 执行查询
			setTimeout(() => {
				bool1.value = true
			}, 500)
		}, 1000)

		tianchongqu.value = 200
		setTimeout(() => {
			scrolljuli.value = 99999
		}, 1600)
	}

	function handleScroll(e, typestr) {
		if (scrolljuli.value == 99999) {
			console.log(e.detail.scrollTop, e, '1111222223333344444')
			scrolljuli.value = e.detail.scrollHeight
		}
	}
	async function tijiao() {
		if (!list.value[pingguind.value]['answer']) {
			uni.showToast({
				title: '请选择答案进行提交',
				icon: 'none'
			})
			return
		}
		var array = []
		for (var i in list.value) {
			var ind = list.value[i]['optionjson'].findIndex(item => item.option == list.value[i]['answer'])
			var obj = {
				id: list.value[i]['id'],
				title: list.value[i]['title'],
				evaluation_id: list.value[i]['evaluation_id'],
				optionjson: [list.value[i]['optionjson'][ind]]
			}
			array.push(obj)
		}
		const res = await $api.lbtij(array)
		if (res.code == 1) {
			uni.setStorageSync('pingguobj', res.data)
			var arr = uni.getStorageSync('ids')
			var ind = arr.findIndex(item => item == optId.value)
			arr.splice(ind, 1)
			uni.setStorageSync('ids', arr)
			setTimeout(() => {
				uni.showToast({
					title: '提交成功'
				})
			}, 500)
			uni.redirectTo({
				url: '/sub_index/index/pinggujieguo'
			})
		}
	}

	function next() {
		if (!list.value[pingguind.value]['answer']) {
			uni.showToast({
				title: '请选择答案进行下一题',
				icon: 'none'
			})
			return
		}
		if (list.value.length - 1 != pingguind.value) {
			pingguind.value++
		}
	}

	function syb() {
		pingguind.value--
	}


	async function initpg(ids) {
		const res = await $api.listpinggu({
			ids
		})
		if (res.code == 1) {
			list.value = res.data
			for (var i in list.value) {
				list.value[i]['answer'] = undefined
			}

			// var arr1 = uni.getStorageSync('liangbiaoanswer') || []
			// var ind = arr1.findIndex(item => item.id == optId.value)
			// if (ind == -1) return
			// var arr2 = arr1[ind]['arr']
			// for (var i in arr2) {
			// 	var ind1 = list.value.findIndex(item => item.id == arr2[i]['id'])
			// 	list.value[ind1]['answer'] = arr2[i]['answer']
			// 	liaotianarr.value.push({
			// 		text: list.value[ind1]['answer'],
			// 		shenfen: 'user',
			// 		bool: false
			// 	}, {
			// 		text: arr2[i]['answer'],
			// 		shenfen: 'user1',
			// 		bool: false,
			// 		isAnimating: false,
			// 	})
			// 	pingguind.value = ind1
			// }
			// pingguind.value = pingguind.value + 1
			// liaotianarr.value.push({
			// 	text: list.value[pingguind.value]['title'],
			// 	shenfen: 'user',
			// 	bool: false
			// })
			// bool1.value = true
			// startbool.value = true
			// setTimeout(() => {
			// 	scrolljuli.value = 99999
			// }, 500)
		}
	}
	async function getuser() {
		const res = await $api.userinfo1()
		if (res.code == 1) {
			userobj.value = res.data['userinfo']

		}
	}
</script>

<style lang="scss">
	.ansderhua {
		width: 530rpx;
		height: 300rpx;
		animation: pulse 0.5s;
	}

	@keyframes pulse {
		0% {
			opacity: 0;
			width: 530rpx;
			height: 300rpx;
		}


		100% {
			opacity: 1;
			height: 96rpx;
			width: 150rpx;
		}
	}

	.animate__fadeInUp {
		-webkit-animation: fadeInUp 2s;
		animation: fadeInUp 2s;
	}

	@keyframes fadeInUp {
		0% {
			opacity: 0;
			-webkit-transform: translate3d(0, 200px, 0);
			transform: translate3d(0, 200px, 0)
		}

		to {
			opacity: 1;
			-webkit-transform: translateZ(0);
			transform: translateZ(0)
		}
	}

	page {
		background: #F7F8FA;
	}

	.xzcolor {
		background: #2ab4f5 !important;
		color: #fff !important;
	}

	.btnssbox {
		width: 100%;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 58rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.btnn1 {
			width: 90%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btnc {
				width: 200rpx;
				height: 64rpx;
				background: #2AB4F5;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(130, 213, 251, 0.58);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 64rpx;
			}
		}

		.btn {
			width: 476rpx;
			height: 64rpx;
			background: #2AB4F5;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(130, 213, 251, 0.58);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 64rpx;
		}
	}

	.liangbiaopnggu {
		width: 100%;
		overflow: hidden;

		.liangbiaopngguback {
			width: 100%;
			height: 558rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.jindubox {
			width: 686rpx;
			height: 140rpx;
			background: rgba(255, 255, 255, 0.49);
			box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(187, 232, 254, 0.89);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #FFFFFF;
			display: flex;
			align-items: center;
			margin: auto;
			margin-top: 48rpx;
			justify-content: center;
			align-items: center;

			.jinduline {
				width: 465rpx;
				height: 22rpx;
				background: #FFFFFF;
				border-radius: 13rpx 13rpx 13rpx 13rpx;


				.center {
					width: 24%;
					height: 22rpx;
					border-radius: 13rpx 13rpx 13rpx 13rpx;
					background: #2AB4F5;

				}
			}

			.jindunum {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #1D2129;
				margin-left: 18rpx;
			}
		}

		.bottomcontent {
			width: 100%;
			background: #F7F8FA;
			box-shadow: 0rpx -4rpx 14rpx 0rpx rgba(143, 217, 254, 0.68);
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			overflow: hidden;
			margin-top: 36rpx;
			overflow: hidden;

			.center {
				width: 686rpx;
				margin: auto;
				margin-top: 38rpx;
				// overflow: hidden;

				.xiamto {
					width: 686rpx;
					overflow: hidden;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-bottom: 30rpx;

					.cnter {
						width: 630rpx;
						margin: auto;
						margin-top: 28rpx;

						.lineti {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							background: #F7F8FA;
							border-radius: 12rpx 12rpx 12rpx 12rpx;
							width: 100%;
							text-align: center;
							padding: 24rpx 0;
							margin-bottom: 20rpx;
						}
					}
				}

				.userltright {
					width: 100%;
					display: flex;
					margin-bottom: 50rpx;
					justify-content: flex-end;

					.avatar {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
						margin-left: 32rpx;
					}


					.bubble-container {
						position: relative;
						max-width: 530rpx;
						;
						/* 气泡框最大宽度 */
						background: #2AB4F5;
						/* 气泡框背景颜色 */
						color: #FFFFFF;
						/* 文字颜色 */
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						/* 圆角边框 */
						padding: 22rpx;
						font-size: 28rpx;
						/* 内边距 */
						/* 外边距，可根据需要调整 */

						.triangle1 {
							position: absolute;
							width: 0;
							height: 0;
							border-top: 10px solid transparent;
							/* 左边透明 */
							border-bottom: 10px solid transparent;
							/* 右边透明 */
							border-left: 10px solid #2AB4F5;
							/* 底边为气泡框背景色 */
							right: -10px;
							/* 位于气泡框顶部 */
							top: 50%;
							/* 居中 */
							/* 居中 */
							transform: translateY(-50%);
							/* 水平居中 */
						}

					}
				}

				.userlt {
					width: 100%;
					display: flex;
					margin-bottom: 50rpx;

					.avatar {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
						margin-right: 32rpx;
					}


					.bubble-container {
						position: relative;
						max-width: 530rpx;
						;
						/* 气泡框最大宽度 */
						background: #FFFFFF;
						/* 气泡框背景颜色 */
						color: #4E5969;
						/* 文字颜色 */
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						/* 圆角边框 */
						padding: 22rpx;
						font-size: 28rpx;
						/* 内边距 */
						/* 外边距，可根据需要调整 */

						.triangle1 {
							position: absolute;
							width: 0;
							height: 0;
							border-top: 10px solid transparent;
							/* 左边透明 */
							border-bottom: 10px solid transparent;
							/* 右边透明 */
							border-right: 10px solid #FFFFFF;
							/* 底边为气泡框背景色 */
							left: -10px;
							/* 位于气泡框顶部 */
							top: 50%;
							/* 居中 */
							transform: translateY(-50%);
							/* 水平居中 */
						}

					}


				}
			}
		}
	}
</style>